<script setup>
import {
    Edit,
    Delete,
    Search,
    Plus,
    Refresh,
    Check,
    Close
} from '@element-plus/icons-vue'

import { ref } from 'vue'

//分类数据模型
const categorys = ref([])
//供应商数据模型
const vendors = ref([])
import { getCategoryListService } from '@/api/category.js'
import { getVendorListService } from '@/api/vendor.js'
import { formatDate } from '@/utils/format.js'
//回显分类列表
const echoCategoryList = async () => {
    let res = await getCategoryListService()
    categorys.value = res.data
}
echoCategoryList()
//回显供应商列表
const echoVendorList = async () => {
    let res = await getVendorListService()
    vendors.value = res.data
}
echoVendorList()

//用户搜索时选中的分类
const categoryId = ref('')
const categoryId2 = ref('')
//用户搜索时选中的供应商
const vendorId = ref('')
const vendorId2 = ref('')


//商品单位模型
const units = ref([
    {
        id: 1,
        unitName: '元/个'
    },
    {
        id: 2,
        unitName: '元/盒'
    },
    {
        id: 3,
        unitName: '元/箱'
    },
    {
        id: 4,
        unitName: '元/瓶'
    },
    {
        id: 5,
        unitName: '元/斤'
    },
    {
        id: 6,
        unitName: '元/吨'
    },
    {
        id: 7,
        unitName: '元/袋'
    },
    {
        id: 8,
        unitName: '元/套'
    }
])
//单位名称数据模型
const unit = ref('')

//商品列表数据模型
const goods = ref([])

//分页条数据模型
const pageNum = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(5)//每页条数
// 查询商品列表
import { getGoodsListService } from '@/api/goods.js'
const echoGoodsList = async () => {
    let res = await getGoodsListService({
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        categoryId: categoryId.value ? categoryId.value : null,
        vendorId: vendorId.value ? vendorId.value : null,
        goodsName: form.value.inputName ? form.value.inputName : null
    })
    console.log(res)
    //渲染商品列表
    goods.value = res.data.items
    //渲染分页条
    total.value = res.data.total
    //添加商品分类名称，for循环遍历goods，根据id查找categorys中对应的分类名称
    for (let i = 0; i < goods.value.length; i++) {
        let good = goods.value[i];
        for (let j = 0; j < categorys.value.length; j++) {
            if (good.categoryId == categorys.value[j].id) {
                good.categoryName = categorys.value[j].categoryName
            }
        }
    }
    //添加供应商名称，for循环遍历goods，根据id查找vendors中对应的供应商名称
    for (let i = 0; i < goods.value.length; i++) {
        let good = goods.value[i];
        for (let j = 0; j < vendors.value.length; j++) {
            if (good.vendorId == vendors.value[j].id) {
                good.vendorName = vendors.value[j].vendorName
            }
        }
    }
}
//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
    pageSize.value = size
    echoGoodsList()
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
    pageNum.value = num
    echoGoodsList()
}
const form = ref({
    inputName: '',
})
echoGoodsList()

import { useTokenStore } from '@/stores/token.js'

const tokenStore = useTokenStore()

//抽屉标题
const title = ref('')

//控制抽屉是否显示
const visibleDrawer = ref(false)
//商品表单数据模型
const goodsModel = ref({
    goodsName: '',
    price: '',
    goodsImg: '',
})

//图片上传的回调函数
const onUploadSuccess = (res) => {
    console.log(res)
    goodsModel.value.goodsImg = res.data
}
//清空goodsModel
const clearGoodsModel = () => {
    goodsModel.value = {
        goodsName: '',
        price: '',
        goodsImg: '',
        purchasePrice: ''
    }
    unit.value = ''
    categoryId2.value = ''
    vendorId2.value = ''
}

//添加商品
import { addGoodsService, updateGoodsService, deleteGoodsService, batchDeleteGoodsService } from '@/api/goods.js'
import { ElMessage, ElMessageBox } from 'element-plus'

//校验
const goodsForm = ref(null)
const rules = ref({
    goodsName: [
        { required: true, message: '请输入商品名称', trigger: 'blur' },
        { min: 2, max: 20, message: '商品名称长度在 2 到 20 个字符', trigger: 'blur' }
    ],
    price: [
        { required: true, message: '请输入商品售价', trigger: 'blur' },
        { type: 'number', message: '商品售价必须为数字', trigger: 'blur' }
    ],
    purchasePrice: [
        { required: true, message: '请输入商品进价', trigger: 'blur' },
        { type: 'number', message: '商品进价必须为数字', trigger: 'blur' }
    ],
    produceDate: [
        { required: false, message: '请选择生产日期', trigger: 'change' }
    ],
    overdueDate: [
        { required: false, message: '请选择过期日期', trigger: 'change' }
    ]
})

//添加商品
const addGoods = async () => {
    await goodsForm.value.validate(async (valid) => {
        if (!valid) {
            return
        }
        if (unit.value == '') {
            ElMessage.error('请选择商品单位')
            return
        }
        if (categoryId2.value == '') {
            ElMessage.error('请选择商品分类')
            return
        }
        if (vendorId2.value == '') {
            ElMessage.error('请选择商品供应商')
            return
        }
        goodsModel.value.categoryId = categoryId2.value
        goodsModel.value.vendorId = vendorId2.value
        // 根据单位id查找单位名称
        for (let i = 0; i < units.value.length; i++) {
            if (units.value[i].id == unit.value) {
                goodsModel.value.unit = units.value[i].unitName
            }
        }
        let res = await addGoodsService(goodsModel.value)
        ElMessage.success(res.message || '添加成功')
        //关闭抽屉
        visibleDrawer.value = false
        //刷新商品列表
        echoGoodsList()
    })
}

//商品详情表单数据模型
const visible = ref(false)
const goodsInfo = ref({})
//查看商品详情
const viewGoods = (row) => {
    goodsInfo.value = row
    visible.value = true
}
//回显编辑商品信息
const editGoods = async (row) => {
    console.log(row);
    //JSON.parse(JSON.stringify(row)) 深拷贝，防止修改goodsModel时修改row
    goodsModel.value = JSON.parse(JSON.stringify(row))
    //回显商品分类
    categoryId2.value = row.categoryId
    //回显供应商
    vendorId2.value = row.vendorId
    //回显单位
    unit.value = row.unit
    title.value = '编辑商品'
    visibleDrawer.value = true
}
//修改商品
const updateGoods = async () => {
    goodsModel.value.categoryId = categoryId2.value
    goodsModel.value.vendorId = vendorId2.value
    // 根据单位id查找单位名称
    for (let i = 0; i < units.value.length; i++) {
        if (units.value[i].id == unit.value) {
            goodsModel.value.unit = units.value[i].unitName
        }
    }
    let res = await updateGoodsService(goodsModel.value)
    ElMessage.success(res.message || '修改成功')
    //关闭抽屉
    visibleDrawer.value = false
    //刷新商品列表
    echoGoodsList()
}


//删除商品
const deleteGoods = async (row) => {
    ElMessageBox.confirm(
        '你确定要删除该商品信息么?',
        '温馨提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            draggable: true,
        }
    )
        .then(async () => {
            let res = await deleteGoodsService(row.id)
            if (res.code == 0) {
                ElMessage({
                    type: 'success',
                    message: res.message || '删除成功',
                })
                echoGoodsList()
                return
            }
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消删除',
            })
        })
}
const handleFileUpload = (file) => {
    goodsModel.value.goodsImg = file.data
}

// 批量删除商品
const ids = ref([])
const handleSelectionChange = (rows) => {
    ids.value = rows.map(v => v.id)
    console.log(ids.value);
}
const deleteGoodsById = async () => {
    ElMessageBox.confirm(
        '你确定要删除选中的商品么?',
        '温馨提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            draggable: true,
        }
    )
        .then(async () => {
            let res = await batchDeleteGoodsService(ids.value)
            if (res.code == 0) {
                ElMessage({
                    type: 'success',
                    message: res.message || '删除成功',
                })
                echoGoodsList()
                return
            } else {
                ElMessage({
                    type: 'error',
                    message: res.message || '删除失败',
                })
            }
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消删除',
            })
        })
}
</script>
<template>
    <div class="page-container">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span class="title">商品管理</span>
                    <div class="header-actions">
                        <el-button type="primary" @click="visibleDrawer = true, title = '添加商品', clearGoodsModel()" class="add-button">
                            <el-icon><Plus /></el-icon>添加商品
                        </el-button>
                        <el-button type="danger" @click="deleteGoodsById" class="delete-button">
                            <el-icon><Delete /></el-icon>批量删除
                        </el-button>
                    </div>
                </div>
            </template>
            
            <!-- 搜索区域 -->
            <div class="search-area">
                <el-form :inline="true" :model="form" class="demo-form-inline">
                    <el-form-item label="商品分类">
                        <el-select 
                            placeholder="请选择" 
                            v-model="categoryId" 
                            clearable
                            class="custom-input">
                            <el-option 
                                v-for="c in categorys" 
                                :key="c.id" 
                                :label="c.categoryName" 
                                :value="c.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="供应商">
                        <el-select 
                            placeholder="请选择" 
                            v-model="vendorId" 
                            clearable
                            class="custom-input">
                            <el-option 
                                v-for="c in vendors" 
                                :key="c.id" 
                                :label="c.vendorName" 
                                :value="c.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商品名称">
                        <el-input 
                            v-model="form.inputName" 
                            placeholder="请输入" 
                            clearable
                            class="custom-input">
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="echoGoodsList" class="search-button">
                            <el-icon><Search /></el-icon>搜索
                        </el-button>
                        <el-button @click="categoryId = '', vendorId = '', form.inputName = ''" class="reset-button">
                            <el-icon><Refresh /></el-icon>重置
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>

            <!-- 商品列表 -->
            <el-table 
                :data="goods" 
                style="width: 100%" 
                @selection-change="handleSelectionChange"
                :header-cell-style="{ background: '#f5f7fa', color: '#606266', fontWeight: 'bold' }"
                :row-style="{ height: '60px' }"
                :cell-style="{ padding: '8px 0' }"
                highlight-current-row
                border
                stripe>
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="序号" width="80" type="index" align="center" />
                <el-table-column label="商品图片" width="120" align="center">
                    <template #default="scope">
                        <el-image 
                            style="width: 65px; height: 65px; border-radius: 5px; display: block"
                            v-if="scope.row.goodsImg" 
                            :src="scope.row.goodsImg" 
                            :preview-src-list="[scope.row.goodsImg]"
                            preview-teleported>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column label="商品名称" min-width="120" prop="goodsName" align="center" />
                <el-table-column label="商品售价" width="110" prop="price" align="center">
                    <template #default="{ row }">
                        <span class="price">¥{{ row.price }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="商品进价" width="110" prop="purchasePrice" align="center">
                    <template #default="{ row }">
                        <span class="price">¥{{ row.purchasePrice }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="计量单位" width="110" prop="unit" align="center" />
                <el-table-column label="商品分类" width="110" prop="categoryName" align="center" />
                <!-- <el-table-column label="操作时间" width="180" prop="updateTime" align="center" /> -->
                <el-table-column prop="updateTime" label="操作时间" min-width="180" align="center" show-overflow-tooltip>
                    <template #default="{ row }">
                        {{ formatDate(row.updateTime) }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180" align="center" fixed="right">
                    <template #default="{ row }">
                        <div class="operation-buttons">
                            <el-tooltip content="查看" placement="top">
                                <el-button type="primary" circle @click="viewGoods(row)" size="small">
                                    <el-icon><Search /></el-icon>
                                </el-button>
                            </el-tooltip>
                            <el-tooltip content="编辑" placement="top">
                                <el-button type="primary" circle @click="editGoods(row)" size="small">
                                    <el-icon><Edit /></el-icon>
                                </el-button>
                            </el-tooltip>
                            <el-tooltip content="删除" placement="top">
                                <el-button type="danger" circle @click="deleteGoods(row)" size="small">
                                    <el-icon><Delete /></el-icon>
                                </el-button>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
                <template #empty>
                    <el-empty description="暂无商品数据" />
                </template>
            </el-table>

            <!-- 分页条 -->
            <div class="pagination-container">
                <el-pagination 
                    v-model:current-page="pageNum" 
                    v-model:page-size="pageSize" 
                    :page-sizes="[10, 20, 50, 100]"
                    :total="total"
                    layout="total, sizes, prev, pager, next, jumper" 
                    background 
                    @size-change="onSizeChange"
                    @current-change="onCurrentChange" />
            </div>
        </el-card>
        
        <!-- 商品详情弹框 -->
        <el-dialog 
            v-model="visible" 
            width="60%" 
            destroy-on-close
            class="custom-dialog"
            :show-close="false">
            <template #header>
                <div class="dialog-header">
                    <div class="dialog-title">
                        <el-icon class="title-icon"><Search /></el-icon>
                        <span>商品详情</span>
                    </div>
                    <el-button class="close-button" @click="visible = false" circle>
                        <el-icon><Close /></el-icon>
                    </el-button>
                </div>
            </template>
            <div class="dialog-content-wrapper">
                <div class="dialog-content">
                    <el-descriptions :column="2" border>
                        <el-descriptions-item label="商品名称">{{ goodsInfo.goodsName }}</el-descriptions-item>
                        <el-descriptions-item label="商品售价">¥{{ goodsInfo.price }}</el-descriptions-item>
                        <el-descriptions-item label="商品进价">¥{{ goodsInfo.purchasePrice }}</el-descriptions-item>
                        <el-descriptions-item label="计量单位">{{ goodsInfo.unit }}</el-descriptions-item>
                        <el-descriptions-item label="商品分类">{{ goodsInfo.categoryName }}</el-descriptions-item>
                        <el-descriptions-item label="供应商">{{ goodsInfo.vendorName }}</el-descriptions-item>
                        <el-descriptions-item label="生产日期">{{ goodsInfo.produceDate }}</el-descriptions-item>
                        <el-descriptions-item label="过期日期">{{ goodsInfo.overdueDate }}</el-descriptions-item>
                        <el-descriptions-item label="库存数量">{{ goodsInfo.quantity }}</el-descriptions-item>
                        <el-descriptions-item label="创建时间">{{ goodsInfo.createTime }}</el-descriptions-item>
                        <el-descriptions-item label="更新时间" :span="2">{{ goodsInfo.updateTime }}</el-descriptions-item>
                        <el-descriptions-item label="商品图片" :span="2">
                            <el-image 
                                :src="goodsInfo.goodsImg" 
                                style="width: 200px; height: 200px; border-radius: 8px;"
                                :preview-src-list="[goodsInfo.goodsImg]">
                            </el-image>
                        </el-descriptions-item>
                    </el-descriptions>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="visible = false" class="close-dialog-button">
                        <el-icon><Close /></el-icon>关闭
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 添加/编辑商品抽屉 -->
        <el-drawer 
            v-model="visibleDrawer" 
            :title="title" 
            direction="rtl" 
            size="60%"
            destroy-on-close
            :show-close="false"
            class="custom-drawer">
            <template #header>
                <div class="drawer-header">
                    <div class="drawer-title">
                        <el-icon class="title-icon"><component :is="title === '添加商品' ? Plus : Edit" /></el-icon>
                        <span>{{ title }}</span>
                    </div>
                    <el-button class="close-button" @click="visibleDrawer = false" circle>
                        <el-icon><Close /></el-icon>
                    </el-button>
                </div>
            </template>
            <div class="drawer-content">
                <el-form 
                    :model="goodsModel" 
                    label-width="100px" 
                    ref="goodsForm" 
                    :rules="rules"
                    class="drawer-form">
                    <el-form-item label="商品名称" prop="goodsName">
                        <el-input v-model="goodsModel.goodsName" placeholder="请输入商品名称" class="custom-input"></el-input>
                    </el-form-item>
                    <el-form-item label="商品售价" prop="price">
                        <el-input-number v-model="goodsModel.price" :min="0" :precision="2" class="custom-input"></el-input-number>
                    </el-form-item>
                    <el-form-item label="商品进价" prop="purchasePrice">
                        <el-input-number v-model="goodsModel.purchasePrice" :min="0" :precision="2" class="custom-input"></el-input-number>
                    </el-form-item>
                    <el-form-item label="计量单位">
                        <el-select v-model="unit" placeholder="请选择计量单位" class="custom-input">
                            <el-option v-for="c in units" :key="c.id" :label="c.unitName" :value="c.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商品分类">
                        <el-select v-model="categoryId2" placeholder="请选择商品分类" class="custom-input">
                            <el-option v-for="c in categorys" :key="c.id" :label="c.categoryName" :value="c.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="供应商">
                        <el-select v-model="vendorId2" placeholder="请选择供应商" class="custom-input">
                            <el-option v-for="c in vendors" :key="c.id" :label="c.vendorName" :value="c.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="生产日期" prop="produceDate">
                        <el-date-picker v-model="goodsModel.produceDate" type="date" placeholder="请选择生产日期" class="custom-input" />
                    </el-form-item>
                    <el-form-item label="过期日期" prop="overdueDate">
                        <el-date-picker v-model="goodsModel.overdueDate" type="date" placeholder="请选择过期日期" class="custom-input" />
                    </el-form-item>
                    <el-form-item label="商品图片">
                        <el-upload 
                            class="avatar-uploader" 
                            :auto-upload="true" 
                            :show-file-list="false" 
                            action="/api/upload"
                            name="file" 
                            :on-success="onUploadSuccess" 
                            :headers="{ 'Authorization': tokenStore.token }">
                            <img v-if="goodsModel.goodsImg" :src="goodsModel.goodsImg" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                        </el-upload>
                    </el-form-item>
                    <el-form-item class="drawer-footer">
                        <el-button type="primary" @click="title === '添加商品' ? addGoods(goodsForm) : updateGoods(goodsForm)" class="submit-button">
                            <el-icon><Check /></el-icon>{{ title === '添加商品' ? '创建' : '更新' }}
                        </el-button>
                        <el-button @click="visibleDrawer = false" class="cancel-button">
                            <el-icon><Close /></el-icon>取消
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-drawer>
    </div>
</template>

<style lang="scss" scoped>
.page-container {
    padding: 20px;
    
    .box-card {
        margin-bottom: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        transition: all 0.3s;

        &:hover {
            box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
        }
    }
    
    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .title {
            font-size: 16px;
            font-weight: bold;
            color: #303133;
        }
        
        .header-actions {
            display: flex;
            gap: 10px;
        }
    }
    
    .search-area {
        margin-bottom: 20px;
    }

    .pagination-container {
        margin-top: 20px;
        display: flex;
        justify-content: flex-end;
    }

    .price {
        color: #f56c6c;
        font-weight: bold;
    }
}

.custom-input {
    width: 220px;
}

.search-button, .reset-button {
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 4px;
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    
    .el-icon {
        margin-right: 4px;
        font-size: 16px;
    }
}

.search-button {
    background-color: var(--el-color-primary) !important;
    border-color: var(--el-color-primary) !important;
    color: white !important;
    
    &:hover {
        background-color: var(--el-color-primary-light-3) !important;
        border-color: var(--el-color-primary-light-3) !important;
    }
}

.add-button, .submit-button {
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 4px;
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    background-color: var(--el-color-primary) !important;
    border-color: var(--el-color-primary) !important;
    color: white !important;
    cursor: pointer;
    
    &:hover {
        background-color: var(--el-color-primary-light-3) !important;
        border-color: var(--el-color-primary-light-3) !important;
    }
    
    .el-icon {
        margin-right: 4px;
        font-size: 16px;
    }
}

.delete-button {
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 4px;
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    background-color: var(--el-color-danger) !important;
    border-color: var(--el-color-danger) !important;
    color: white !important;
    cursor: pointer;
    
    &:hover {
        background-color: var(--el-color-danger-light-3) !important;
        border-color: var(--el-color-danger-light-3) !important;
    }
    
    .el-icon {
        margin-right: 4px;
        font-size: 16px;
    }
}

.dialog-header, .drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #e4e7ed;
    
    .dialog-title, .drawer-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 16px;
        font-weight: bold;
        
        .title-icon {
            font-size: 20px;
            color: var(--el-color-primary);
        }
    }
}

.dialog-content-wrapper {
    padding: 20px;
}

.dialog-content {
    padding: 20px;
    background-color: #f5f7fa;
    border-radius: 4px;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.close-dialog-button, .cancel-button {
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 4px;
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    
    .el-icon {
        margin-right: 4px;
        font-size: 16px;
    }
}

.operation-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.drawer-content {
    padding: 20px;
    height: calc(100% - 120px);
    overflow-y: auto;
}

.drawer-form {
    padding: 20px;
}

.drawer-footer {
    margin-top: 40px;
    text-align: center;
}

:deep(.el-descriptions) {
    padding: 20px;
    background-color: #f5f7fa;
    border-radius: 4px;
}

:deep(.el-dialog__body) {
    padding: 20px;
}

:deep(.el-drawer__body) {
    padding: 0;
    position: relative;
    overflow: hidden;
}

.avatar-uploader {
    :deep() {
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
            border-radius: 8px;
            object-fit: cover;
        }

        .el-upload {
            border: 1px dashed var(--el-border-color);
            border-radius: 8px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: var(--el-transition-duration-fast);

            &:hover {
                border-color: var(--el-color-primary);
            }
        }

        .el-icon.avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            text-align: center;
            line-height: 178px;
        }
    }
}

.el-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
</style>